﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="wfShpPageColEditor.aspx.cs"
    Inherits="msBsc.WebUi.wfShpPageColEditor" %>

<!DOCTYPE HTML>
<html>
<head id="Head1" runat="server">
    <title>栏目配置</title>
    <link rel="shortcut icon" href="/themes/Style1/Image/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="/??themes/Style1/StyleQt.css" />
    <script src="/??jqPlugin/js/jquery-1.8.3.min.js,js/jBase.js,js/jBPage.js,themes/Style1/jsQt.js,jqPlugin/js/laytpl.js,jqPlugin/js/jquery.dragsort-0.4.min.js"
        type="text/javascript"></script>
    <!--head fix rgn-->
    <style type="text/css">
        .img-item
        {
            float: left;
            background-color: #ddd;
            margin: 5px;
            padding: 5px;
            border: 2px solid #bbb;
        }
        .img-item-select
        {
            border: 2px solid #C00;
        }
        .text-overflow
        {
            width: 100%;
            display: block; /*内联对象需加*/
            width: 31em;
            word-break: keep-all; /* 不换行 */
            white-space: nowrap; /* 不换行 */
            text-overflow: ellipsis; /* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
            overflow: hidden; /* 内容超出宽度时隐藏超出部分的内容 */
        }
        .text-overflow2
        {
            width: 100%;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }
        .winWrap
        {
        }
        .winTit
        {
            padding: 5px 10px;
        }
        .wGoodsWrap
        {
            width: auto;
            height: auto;
            float: left;
            border: 1px dashed #c4d5e0;
            padding: 5px;
            background-color: #eee;
            margin-left: 10px;
            margin-top: 10px;
            cursor: move;
            padding:3px;
        }
        .wStyle2
        {
            width: 497px;
            height: 293px;
        }
        .wStyle2 .wGoodsImg
        {
            width: 497px;
            height: 253px;
        }
        .wStyle3
        {
            width: 325px;
            height: 263px;
        }
        .wStyle3 .wGoodsImg
        {
            width: 325px;
            height: 223px;
        }
        .wStyle4
        {
            width: 239px;
            height: 193px;
        }
        .wStyle4 .wGoodsImg
        {
            width: 239px;
            height: 153px;
        }
        .wStyle5
        {
            width: 187px;
            height: 193px;
        }
        .wStyle5 .wGoodsImg
        {
            width: 187px;
            height: 153px;
        }
        .wGoodsImg
        {
            overflow: hidden;
            background-color:#fff; 
        }
        .wGoodsImg img
        {
            max-width: 100%;
            height: 100%;
        }
         
        .winBox
        {
            height: auto;
            overflow: hidden;
            position: relative;
        } 
        .ngImg
        {
            width: 55px;
            height: 55px;
            display: block;
            float: left;
            margin-left: 5px;
            margin-top: 5px;
            background-color: #fff;
            cursor: pointer;
        } 
        .wGoodsTxt
        {
            line-height: 16px;
            height: 32px;
            overflow: hidden;
        }
        .wGoodsClearWrap
        {
            height: 3px;
        }
        .wGoodsClearBtn
        {
            width: 16px;
            height: 16px;
            display: block;
            position: absolute;
            margin-top: -10px;
            cursor: pointer;
            margin-left: 0px;
            background: url("/themes/Style1/Image/minPng-80-450.png") -41px 0px;
            z-index: 100;
        }
        .hidecolgoodslist
        {
            display:none;  
        }
        .dash-move{ background-color:#fff;}
        .moving-item{ cursor:move;}
        /*.wGoodsClearBtn:hover{background-position: -22px 0px;}*/
    </style>
    <script type="text/javascript">


        $(document).ready(function () { 
            var range = { x: 0, y: 0 }; //鼠标元素偏移量
            var lastPos = { x: 0, y: 0, x1: 0, y1: 0 }; //拖拽对象的四个坐标
            var tarPos = { x: 0, y: 0, x1: 0, y1: 0 }; //目标元素对象的坐标初始化

            var theDiv = null, move = false; //拖拽对象 拖拽状态 
            var tarDiv = null, tempDiv = null;  //, tarFirst, tempDiv;  //要插入的目标元素的对象, 临时的虚线对象

            $(".wGoodsWrap").live("mousedown", function (event) {
                if (move) return false;
                //拖拽对象
                theDiv = $(this); 
                tarDiv = null;
                if (theDiv.next().length <= 0 && theDiv.prev().length <= 0) {
                    return;
                } 
                //鼠标元素相对偏移量
                range.x = theDiv.parent().offset().left; // +(event.pageX - theDiv.offset().left);
                range.y = theDiv.parent().offset().top; // +(event.pageY - theDiv.offset().top);  
                move = true;
            });

            $(document).mousemove(function (event) {
                if (!move) return false;
                if (!theDiv.hasClass("moving-item")) {
                    tempDiv = theDiv.clone().html('').addClass("dash-move").removeClass("hidecolgoodslist").addClass("hidecolgoodslist"); 
                    theDiv.addClass("moving-item");
                    tempDiv.insertBefore(theDiv);
                } 
                if (tempDiv.hasClass("hidecolgoodslist")) {
                    tempDiv.removeClass("hidecolgoodslist");
                }
                lastPos.x = event.pageX - range.x;
                lastPos.y = event.pageY - range.y;  
                // 拖拽元素随鼠标移动
                theDiv.css({ position: 'absolute', cursor: 'move', left: lastPos.x + 'px', top: lastPos.y + 'px' }); 
            }).mouseup(function (event) {
                if (move) { 
                    tempDiv = $(".dash-move"); //获得临时 虚线框的对象
                    var $main = tempDiv.parent(); // 局部变量：按照重新排列过的顺序  再次获取 各个元素的坐标，
                    tarDiv = null;
                    $main.find(".wGoodsWrap").each(function () {
                        var tarDivtm = $(this);
                        var xx = theDiv.offset().left + (theDiv.width() / 2);
                        var yy = theDiv.offset().top + (theDiv.height() / 2);
                        if ((tarDivtm.offset().left <= xx && tarDivtm.offset().left + tarDivtm.width() >= xx)
                             && (tarDivtm.offset().top <= yy && tarDivtm.offset().top + tarDivtm.height() >= yy)
                             && !tarDivtm.hasClass("dash-move")
                             && !tarDivtm.hasClass("moving-item")) {
                            tarDiv = tarDivtm; 
                        } 
                    });  
                    theDiv.css({ position: '', cursor: '', left: '', top: '' });
                    if (tarDiv != null) {
                        theDiv.insertBefore(tarDiv);
                    } 
                    theDiv.removeClass("moving-item");
                    tempDiv.remove(); // 删除新建的虚线div 
                    move = false;
                }
            });

        });
  




        $(window).load(function () {
            $.ploadFile("layer", function (script, textStatus) {
                //                layer.load('加载中'); 
            });
            $(".btn-show-goods").live('click', function () {
                var $coltem1 = $(".page-col[col-id='" + $(this).attr('col-id') + "']");
                $coltem1.find(".page-col-goods").removeClass("hidecolgoodslist");
                $(this).hide();
                $(this).next().show();
            });
            $(".btn-hide-goods").live('click', function () {
                var $coltem1 = $(".page-col[col-id='" + $(this).attr('col-id') + "']");
                $coltem1.find(".page-col-goods").removeClass("hidecolgoodslist").addClass("hidecolgoodslist");
                $(this).hide();
                $(this).prev().show();
            });
            $(".page-col input[for-data='ROW_COLSPAN_NUM']").live('change', function () {
                var $self = $(this);
                var iicolspan = $self.val();
                if (iicolspan != "2" && iicolspan != "3" && iicolspan != "4" && iicolspan != "5") {
                    $self.val($self.attr("old-val"));
                    return;
                }
                $self.attr("old-val", iicolspan);
                var $coltem1 = $(".page-col[col-id='" + $self.attr('col-id') + "']");
                $coltem1.find(".page-col-goods .wGoodsWrap").each(function (ii, keyt) {
                    $(keyt).removeClass("wStyle2").removeClass("wStyle3").removeClass("wStyle4").removeClass("wStyle5").removeClass("wStyle6").addClass("wStyle" + iicolspan);
                });
            });
            $(".wGoodsClearBtn").live("click", function () {
                $(this).parent().parent().remove();
            });
        });

        function delGoodsCol(scolid) {
            var $coltem1 = $(".page-col[col-id='" + scolid + "']");
            if ($coltem1 && $coltem1.length > 0) {
                $coltem1.remove();
            }
        };

        function getsaveParam(_jsParam) {
            var icolcount = 0;
            $(".page-col").each(function (ii, itemt) {
                var $coltem1 = $(itemt);
                $coltem1.find(" input[type='text']").each(function (tt2, itemt2) {
                    _jsParam.AddCell($(itemt2).attr("for-data") + "_" + ii, $(itemt2).val());
                });
                var $ckbtm = $coltem1.find(" input[for-data='IS_COL_SHOW']");
                if ($ckbtm.attr("checked") || $ckbtm.attr("checked") == "checked") {
                    _jsParam.AddCell($ckbtm.attr("for-data") + "_" + ii, "True");
                } else {
                    _jsParam.AddCell($ckbtm.attr("for-data") + "_" + ii, "False");
                }
                var icolgoodscount = 0;
                $coltem1.find(".page-col-goods .wGoodsWrap").each(function (tt2, itemt2) {
                    _jsParam.AddCell("GOODS_ID_" + ii + "_" + tt2, $(itemt2).attr("goods-id"));
                    icolgoodscount++;
                });
                _jsParam.AddCell(icolcount + "_COUNT", icolgoodscount);
                icolcount++;
            });
            _jsParam.AddCell("PAGE_COL_COUNT", icolcount);
        };
        function btnDo(sEbtn) {
            GtGrid1Action = sEbtn;
            var opart = GetGtParam();
            if (sEbtn == "btnSave") {
                getsaveParam(opart);
                ajaxComm(opart); 
            }
            else {
                ajaxComm(opart); //调用页面回调，并传入参数
            }
            GtGrid1Action = "";
        };
        function GetGtParam(jqGridID) {
            var _jsParam = new jsonRow();
            _jsParam.AddCell("ACTION", GtGrid1Action);
            //这里可增加传入后台的参数
            return _jsParam;
        };
        var sCurrcolid = '';
        function GoodsSelEnd(sgoodsId, sgoodsNme, sgoodsImg) {
            var $coltem1 = $(".page-col[col-id='" + sCurrcolid + "']");
            if ($coltem1.find(".page-col-goods .wGoodsWrap[goods-id='" + sgoodsId + "']").length > 0) {
                return;
            }


            var $icolspan = $coltem1.find(" input[for-data='ROW_COLSPAN_NUM']");
            var iicolspan = 4;
            if ($icolspan && $icolspan.length > 0) {
                iicolspan = $icolspan.val();
            }
            if ($coltem1 && $coltem1.length > 0) {
                var _data = { rows: [{ GOODS_ID: sgoodsId, GOODS_NME: sgoodsNme, IMG_URL: sgoodsImg, ROW_COLSPAN_NUM: iicolspan, rows: []}] };
                var tpl = HtmlUtil.htmlDecode($("#goods_item_temp").val());
                laytpl(tpl).render(_data, function (render) {
                    $coltem1.find(".page-col-goods").append(render);
                });
            }
        };
        function ShowGoodsSel(scolid) {
            sCurrcolid = scolid;
            $.ploadFile("layer", function (script, textStatus) {
                $.layer({
                    type: 2,
                    shade: [0.5, '#000'],
                    fix: true,
                    title: '-',
                    maxmin: false,
                    iframe: { src: '/d_IframGoodsSel.htm' },
                    area: ['990px', '530px'],
                    end: function (index) { }
                });
            });
        };
        var newpagecolid = 0;
        function addPageCol() {
            newpagecolid++;
            var _data = { rows: [{ PAGE_COL_ID: newpagecolid, PAGE_COL_NME: '', PAGE_COL_TITLE: '', COL_SEQ_NUM: $(".page-col").length+1, IS_COL_SHOW: 'True', ROW_COLSPAN_NUM: '4', TEMPLATE_STYLE_CID: '', rows: []}] };
            var tpl = HtmlUtil.htmlDecode($("#list_temp").val());
            laytpl(tpl).render(_data, function (render) {
                $("#page_col_list").append(render);
            });
        };

        function doBoundGoodsList(_data, _shopurl) {
            var tpl = HtmlUtil.htmlDecode($("#list_temp").val());
            laytpl(tpl).render(_data, function (render) {
                $("#page_col_list").html(render);
            });
        };
    </script>
</head>
<body>
    <div id="mallPage" class="tms-page mallAct tmall-  page-not-market">
        <!-- -->
        <!--商城通用顶通-->
        <%=new msBsc.WebUi.Code.QtHtmlGet().GetHeaderTopHtml()%>
        <%=new msBsc.WebUi.Code.QtHtmlGet().GetHeaderLogoDealerHtml("商户管理")%>
        <div id="content" class="content" style="padding-top: 10px;">
            <div class="page lang-zh-S">
                <div id="mytaobao-panel" class="grid-c2">
                    <div class="col-main" id="J_Col_Main" style="padding-bottom: 0;">
                        <div class="main-wrap">
                            <div id="main-content">
                                <div id="divCondition" style="margin: 3px; border-style: solid; border-width: 0px;
                                    border-color: #C8D2E0; background-color: #fff; padding: 3px; font-size: 14px;">
                                    <div style=" padding:3px;color:#bd362f;">提示：单排显示个数只能是2、3、4、5这4个数字，可以增加任意数量的橱窗，任意数量的商品列表！</div>
                                    <table border="0" cellpadding="0" cellspacing="0" style="float: right;width:100%;">
                                        <tr>
                                        <td align="left">
                                                <input class="btn btn-mini btn-danger" id="Button2" type="button" onclick="javascript:btnDo('btnSave');return false;"
                                                    value="保存橱窗设置" /><span id="ttt"></span>
                                        </td>
                                            <td align="center" style="padding-left: 20px;">
                                                <input class="btn btn-mini btn-danger" id="Button1" type="button" onclick="javascript:addPageCol();return false;"
                                                    value="新增橱窗" />
                                                <input class="btn btn-mini btn-danger" id="btnFinder" type="button" onclick="javascript:if(confirm('您确认要刷新吗？刷新后未保存的信息将被丢弃！')){btnDo('loadGoodslist');}return false;"
                                                    value="刷新橱窗列表" />
                                            </td>
                                        </tr>
                                    </table>
                                    <div style="clear: both;">
                                    </div>
                                </div>
                                <h2 class="h2-single">
                                    <span class="entity">橱窗列表</span></h2>
                                <div id="page_col_list" style="background-color: #fff; padding: 3px;">
                                </div>
                                <div style="height: 10px; clear: both;">
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- end col-main -->
                    <div class="col-sub" id="J_Col_Sub">
                        <%=new msBsc.WebUi.Code.QtHtmlGet().GetDealerMenu()%>
                    </div>
                    <div style="clear: both;">
                    </div>
                </div>
                <!-- end mytaobao-panel -->
            </div>
        </div>
        <%=new msBsc.WebUi.Code.QtHtmlGet().GetFloorHtml()%>
    </div>
    <!-- template -->
    <textarea id="goods_item_temp" style="display: none;">   
    {{#for(var r=0,lenr=d.rows.length;r < lenr;r++){}}
    {{#if(d.rows[r].GOODS_ID!=''){}}
        <div class="wGoodsWrap wStyle{{ d.rows[r].ROW_COLSPAN_NUM }}" style="display: block; text-align: center;" goods-id="{{d.rows[r].GOODS_ID}}">
            <div class="wGoodsImg">
                {{#if(d.rows[r].IMG_URL!=''){}}
                <img alt="" src="{{d.rows[r].IMG_URL}}"/>
                {{#}}}
                </div>
            <div class="clear5">
            </div>
            <div class="wGoodsTxt text-overflow text-overflow2" title="{{d.rows[r].GOODS_NME}}">
                {{d.rows[r].GOODS_NME}}</div>
            <div class="wGoodsClearWrap">
                <b></b>
            </div>
        </div>
    {{#}}} 
    {{#}}} 
        </textarea>
    <textarea id="list_temp" style="display: none;">   
        {{#for(var i=0,len=d.rows.length;i < len;i++){}}
<div class="page-col" style="margin: 3px; padding: 3px; background-color: #eee;" col-id="{{d.rows[i].PAGE_COL_ID}}">
    <div class="page-col-title winTit shopBlockTit" style="background-color: #eee; height: 26px;">
        <table border="0" cellspacing="0" cellpadding="0">
            <tbody>
                <tr>
                    <td width="40" align="right">
                        序号：
                    </td>
                    <td width="30">
                        <input style="width: 30px;" type="text" for-data="COL_SEQ_NUM" value="{{d.rows[i].COL_SEQ_NUM}}" />
                    </td>
                    <td width="80" align="right">
                        橱窗名称：
                    </td>
                    <td width="150">
                        <input style="width: 150px;" type="text" for-data="PAGE_COL_NME" value="{{d.rows[i].PAGE_COL_NME}}"/>
                    </td>
                    <td width="80" align="right">
                        橱窗描述：
                    </td>
                    <td width="100">
                        <input style="width: 100px;" type="text" for-data="PAGE_COL_TITLE" value="{{d.rows[i].PAGE_COL_TITLE}}"/>
                    </td>
                    <td width="110" align="right">
                        单排显示个数：
                    </td>
                    <td width="30">
                        <input style="width: 30px;" type="text" for-data="ROW_COLSPAN_NUM" value="{{d.rows[i].ROW_COLSPAN_NUM}}" old-val="{{d.rows[i].ROW_COLSPAN_NUM}}" title="只能输入2，3，4，5这个4个数字" col-id="{{d.rows[i].PAGE_COL_ID}}"/>
                    </td>
                    <td width="80" align="right">
                        是否显示：
                    </td>
                    <td width="30" style="padding-top: 3px;">
                        {{#if(d.rows[i].IS_COL_SHOW=='True'){}}
                        <input  for-data="IS_COL_SHOW" type="checkbox" checked="checked"/>
                        {{#}else{}}
                        <input  for-data="IS_COL_SHOW" type="checkbox"/>
                        {{#}}}
                    </td>
                    <td>
                        <input   type="text" for-data="PAGE_COL_ID" value="{{d.rows[i].PAGE_COL_ID}}" style="display:none;"/>
                        <input class="btn btn-mini btn-danger btn-sel-goods" type="button" onclick="ShowGoodsSel('{{d.rows[i].PAGE_COL_ID}}');" value="添加商品" />
                        <input class="btn btn-mini btn-danger btn-show-goods" type="button" value="显示列表" col-id="{{d.rows[i].PAGE_COL_ID}}"
                            style="display: none;" />
                        <input class="btn btn-mini btn-danger btn-hide-goods" type="button" value="隐藏列表" col-id="{{d.rows[i].PAGE_COL_ID}}" />
                        <input class="btn btn-mini btn-danger " type="button" onclick="delGoodsCol('{{d.rows[i].PAGE_COL_ID}}');" value="删除" />
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="page-col-goods winBox shopBlockContent" style="padding: 3px; background-color: #fff;">
    {{#for(var r=0,lenr=d.rows[i].rows.length;r < lenr;r++){}}
    {{#if(d.rows[i].rows[r].GOODS_ID!=''){}}
        <div class="wGoodsWrap wStyle{{ d.rows[i].ROW_COLSPAN_NUM }}" style="display: block; text-align: center;" goods-id="{{d.rows[i].rows[r].GOODS_ID}}">
            <div class="wGoodsImg">
                {{#if(d.rows[i].rows[r].IMG_URL!=''){}}
                <img alt="" src="{{d.rows[i].rows[r].IMG_URL}}"/>
                {{#}}}
                </div>
            <div class="clear5">
            </div>
            <div class="wGoodsTxt text-overflow text-overflow2" title="{{d.rows[i].rows[r].GOODS_NME}}">
                {{d.rows[i].rows[r].GOODS_NME}}</div>
            <div class="wGoodsClearWrap">
                <a class="wGoodsClearBtn"></a>
            </div>
        </div>
    {{#}}}
    {{#}}}
    </div>
</div>
        {{#}}}
        </textarea>
    <!-- foot script -->
</body>
</html>
